<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
  </head>
  <body>
      <div id="app">hello</div>
      <script>
          // 模拟Vue中的data选项
          let data = {
              msg: 'hie',
              conunt: 0
          }
          // 模拟Vue的实例
          let vm = new Proxy(data, {
              // 执行代理行为的函数
              // 当访问VM的成员会执行
              get(target, key){
                  return target[key]
              },
              set(target, key, newValue) {
                if(newValue === data[key]) {
                    return
                }
                target[key] = newValue
                document.querySelector('#app').textContent = data[key]
              }
          })
          
          
          // 测试
          vm.msg = "Hello Miya"
          vm.conunt = 601
          console.log(vm.msg)
        //   console.log()
      </script>
  </body>
</html>
